<template>
  <div class="categories-page">
    <h1 class="page-title">博客分类</h1>

    <el-row :gutter="30">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="category in displayedCategories" :key="category.name" style="margin-bottom: 20px;">
        <el-card 
          class="category-card" 
          shadow="hover" 
          :class="{ 'is-active': selectedCategory === category.name }"
          @click="selectCategory(category.name)"
        >
          <div class="category-header">
            <h3 class="category-name">{{ category.name }}</h3>
            <el-tag size="small" effect="plain">{{ category.count }}篇</el-tag>
          </div>
          <div class="category-description">
            {{ category.description }}
          </div>
          <div class="category-footer">
            <el-button type="primary" text>查看文章</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div class="pagination" v-if="totalPages > 1">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="categories.length"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
      />
    </div>

    <div class="category-posts" v-if="selectedCategory">
      <h2 class="category-title">
        分类：{{ selectedCategory }}
        <el-button type="text" @click="clearSelection">清除筛选</el-button>
      </h2>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" v-for="post in filteredPosts" :key="post.id">
          <BlogCard :post="post" />
        </el-col>
      </el-row>

      <div class="pagination" v-if="filteredPosts.length > postsPerPage">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="filteredPosts.length"
          :page-size="postsPerPage"
          :current-page="postsCurrentPage"
          @current-change="handlePostsPageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useBlogStore } from '@/store/blogStore'
import BlogCard from '@/components/BlogCard.vue'

const blogStore = useBlogStore()
const selectedCategory = ref('')
const currentPage = ref(1)
const postsCurrentPage = ref(1)
const pageSize = 8
const postsPerPage = 6

const categories = [
  { name: 'Java', count: 3, description: 'Java语言相关教程和实战文章' },
  { name: '前端', count: 2, description: '前端开发技术、框架和最佳实践' },
  { name: 'Postman', count: 1, description: 'Postman API测试工具使用教程' },
  { name: 'Spring Cloud Alibaba', count: 1, description: '基于Spring Cloud Alibaba的微服务架构实践' },
  { name: 'Spring Boot', count: 0, description: 'Spring Boot框架学习和应用' },
  { name: 'Netty', count: 0, description: 'Netty网络编程框架教程' },
  { name: '团队管理', count: 0, description: '技术团队管理经验和方法' },
  { name: '设计模式', count: 0, description: '软件设计模式原理和应用实例' }
]

const displayedCategories = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  return categories.slice(start, start + pageSize)
})

const totalPages = computed(() => Math.ceil(categories.length / pageSize))

const filteredPosts = computed(() => {
  if (!selectedCategory.value) return []
  const start = (postsCurrentPage.value - 1) * postsPerPage
  const filtered = blogStore.posts.filter(post => post.tags.includes(selectedCategory.value))
  return filtered.slice(start, start + postsPerPage)
})

const handlePageChange = (page: number) => {
  currentPage.value = page
}

const handlePostsPageChange = (page: number) => {
  postsCurrentPage.value = page
  window.scrollTo({
    top: document.querySelector('.category-posts')?.offsetTop,
    behavior: 'smooth'
  })
}

const selectCategory = (category: string) => {
  selectedCategory.value = category
  postsCurrentPage.value = 1
}

const clearSelection = () => {
  selectedCategory.value = ''
  postsCurrentPage.value = 1
}

onMounted(() => {
  // 默认选中第一个分类
  if (categories.length > 0) {
    selectCategory(categories[0].name)
  }
})
</script>

<style scoped>
.categories-page {
  width: 100%;
  padding: 20px 0;
}

.page-title {
  margin: 0 0 30px;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}

.category-card {
  height: 100%;
  margin-bottom: 30px;
  transition: transform 0.3s;
  z-index: 1;
}

.category-card:hover {
  transform: translateY(-5px);
  z-index: 2;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.category-name {
  margin: 0;
  font-size: 18px;
}

.category-description {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
  min-height: 40px;
}

.category-footer {
  display: flex;
  justify-content: flex-end;
}

.is-active {
  border-color: var(--accent-color);
}

.category-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.category-posts {
  margin-top: 40px;
}
</style>
